Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@cypress/e2e/spec.cy.ts`:
- Around line 26-33: The test can flake on CI due to the 300ms throttle in
src/utils/event.ts and network variability; update the test that calls
cy.scrollTo('bottom') to wait longer for the API alias by changing
cy.wait('@getNextPopularMovies') to cy.wait('@getNextPopularMovies', { timeout:
10000 }) (or another increased timeout) so the
scrollEvent()/CUSTOM_EVENT.SCROOL_END debounce in src/main.ts has ample time to
trigger the second fetch after the initial cy.wait('@getPopularMovies'); keep
the same aliases and assertions ('.thumbnail-list > li' length check) but
increase the wait timeout to stabilize CI runs.

In `@src/api/fetchApi.ts`:
- Line 22: Remove the leftover debugging console.log(resultUrl) from
src/api/fetchApi.ts (or guard it behind a dev-only check); either delete the
console.log call or wrap it so it only runs in non-production (e.g., check
process.env.NODE_ENV or a DEBUG env var) to prevent debug output in production
builds while preserving dev visibility when needed.

In `@src/api/types.ts`:
- Around line 12-20: MovieDetail.vote_average is incorrectly typed as string
while TMDB returns a JSON number and MovieData.vote_average is already a number;
update the MovieDetail type to use number for vote_average to match the API and
MovieData, then search for usages of MovieDetail.vote_average (e.g., any code
that assumes a string) and update parsing/formatting (toFixed, toString, etc.)
as needed to handle numeric values consistently.

In `@src/components/main/Main.ts`:
- Around line 28-33: Click handler on $ul can call onDetail(NaN) when the click
target isn't an li or the li has no data-id; update the listener in Main.ts to
validate the clicked element and id before calling onDetail: inside the $ul
click callback (the $ul variable and existing $li extraction), check that $li is
non-null and that $li.dataset.id is defined (use parseInt or Number safely), and
return early if validation fails so onDetail is only invoked with a valid
numeric id; ensure you reference $li, $li.dataset.id and onDetail when making
the change.

In `@src/components/modal/Modal.ts`:
- Around line 50-55: In `#update`(movie: MovieDetail) guard against
movie.poster_path being null before calling getOriginalImageUrl: if poster_path
is falsy, set the img src to a placeholder/default image (or a
getPlaceholderImage() helper) instead of calling getOriginalImageUrl(null);
update the assignment that targets $<HTMLImageElement>(this.#$modal,
'.modal-image img').src and ensure any helper used (getOriginalImageUrl or new
getPlaceholderImage) is referenced so reviewers can locate the change.
- Around line 89-93: Remove the leftover debug console.log from the Modal.close
method: delete the statement console.log('object') inside the close() function
so only the DOM class removals (this.#$body.classList.remove('modal-open') and
this.#$modal.classList.remove('active')) remain; ensure no other debug logs are
left in the Modal class.
- Around line 71-74: The open(movie: MovieDetail) method on Modal overwrites the
body element's existing classes by setting this.#$body.className = 'modal-open';
change this to add the class instead (use classList.add('modal-open')) so
existing classes are preserved and behavior is consistent with close() which
uses classList.remove; update the open method where this.#$body is referenced
(and leave this.#$modal.classList.add('active') and this.#update(movie)
unchanged).

In `@src/pages/HomePage.ts`:
- Around line 107-115: In `#onDetail` remove the leftover debug console.log
statements (console.log(this.#$modal) and console.log(e)); keep the async
fetchMovieDetails(movie_id) call and this.#$modal.open(movie) intact and replace
the error console.log with proper error handling (e.g., use console.error(e) or
a project logger or rethrow) so no debug-only console.log remains.

In `@src/pages/SearchPage.ts`:
- Around line 34-37: 현재 코드 uses querySelector(`#${query}`) inside the
CUSTOM_EVENT.SCROOL_END listener which breaks when query contains spaces/special
chars; replace that selector usage with a safer check: either use
document.getElementById(query) if query is an element id, or call
CSS.escape(query) before building the selector, or (better) track and check the
actual DOM element reference instead of string names; update the listener in
window.addEventListener(CUSTOM_EVENT.SCROOL_END, ...) to use
document.getElementById(query) or an escaped selector and then call
this.#loadMore() only if the element exists.
- Around line 110-118: Remove the debug console.log calls in the `#onDetail`
method: delete console.log(this.#$modal) and replace console.log(e) in the catch
block with proper error handling — e.g., show a user-facing error via
this.#$modal (or another UI error handler) and/or log the error through your app
logger; ensure fetchMovieDetails(movie_id) failures surface a friendly message
instead of raw console output.

In `@src/utils/event.ts`:
- Line 4: There's a typo in the exported event constant name: rename the
constant SCROOL_END to SCROLL_END in the src/utils/event.ts definition and
update every usage/reference throughout the codebase (imports, switch/case,
event emitters/listeners) to use SCROLL_END; ensure any exports and re-exports
(e.g., in enums or objects) and tests are updated and run the build to catch
missed occurrences so no runtime import/usage breaks occur.

In `@styles/main.css`:
- Around line 312-318: The CSS rule for .top-rated-container and
.search-container uses justify-items which has no effect on a flex container;
remove the justify-items declaration and, if horizontal centering of child items
was intended, replace it with justify-content (e.g., center) while keeping
align-items for vertical alignment, or adjust whichever property
(justify-content / align-items / flex-direction) matches the intended layout;
update the rule targeting .top-rated-container and .search-container
accordingly.

In `@styles/modal.css`:
- Line 123: The CSS rule in styles/modal.css uses an invalid padding declaration
"padding: 40 24"; update the padding property in that rule (padding) to include
explicit units for both values (e.g., px, rem, etc.) so it becomes a valid CSS
shorthand like "padding: 40px 24px;" using the same selector where padding is
defined.
- Around line 138-150: In the .modal rule consolidate duplicate/conflicting
declarations: remove the earlier border-radius: 0 and any extra width lines so
only one border-radius (keep border-radius: 16px) and one width remain, and fix
the invalid width: 390 by adding a unit (e.g., width: 390px) or replace it with
the intended width (e.g., 800px) — ensure height/top/bottom/padding/gap remain
consistent with the chosen width and remove any redundant duplicate properties.

In `@styles/thumbnail.css`:
- Around line 5-10: Remove the unnecessary blank line before the first
declaration in the CSS rule that contains "justify-content" and
"grid-template-columns" (the rule block with those properties); delete the empty
line so declarations start immediately after the selector, satisfying
Stylelint's declaration-empty-line-before rule (or adjust the rule config if an
exception is required).

---

Nitpick comments:
In `@src/api/fetchApi.ts`:
- Around line 48-53: The fetchMovieDetails function relies on fetchAPI without
an explicit generic, allowing TypeScript to infer a union type; update the
fetchAPI invocation in fetchMovieDetails to pass the concrete generic type
MovieDetail (i.e., call fetchAPI<MovieDetail>(...)) so the function returns
Promise<MovieDetail> explicitly and improves type safety; locate the
fetchMovieDetails function and its fetchAPI call to make this change.

In `@src/components/common/Rate.ts`:
- Around line 3-10: The Rate component should accept a numeric vote_average (use
the API type MovieData.vote_average) and simplify rounding: change the Rate
signature to take vote_average: number and replace the
Math.round(Number(vote_average) * 10) / 10 logic with vote_average.toFixed(1)
(or if you must accept string, use Number(vote_average).toFixed(1)); then assign
that result to $span.textContent. This ensures type consistency with
MovieData.vote_average and removes the redundant Math.round + toFixed
combination in the Rate function.

In `@src/components/header/SearchForm.ts`:
- Around line 23-26: The current handler reads const query = $input.value and
always calls onSubmit(query), which passes empty or whitespace-only queries
through; update the submit logic in SearchForm to validate the input before
calling onSubmit by trimming $input.value and returning early (or not calling
onSubmit) when the trimmed string is empty, and only clear $input.value after a
successful submit; refer to the $input element (query from $input.value), the
$form submission flow and the onSubmit callback when making the change.

In `@src/components/header/SearchHeader.ts`:
- Around line 16-17: $justLayout is an empty div whose purpose is unclear;
update its declaration in SearchHeader (the $justLayout const) to either add a
descriptive class name (e.g., "layout-spacer" or "search-header-spacer") or add
an inline comment above its creation explaining its role (e.g., spacer for flex
alignment), and ensure the same descriptive class/comment is used where
$justLayout is appended alongside Logo() and SearchForm(onSubmit) so its intent
is obvious to future readers.

In `@src/components/main/Main.ts`:
- Around line 56-62: The removeSkeletons method currently removes DOM nodes but
leaves an empty entry in the #$skeletons Map; update removeSkeletons to also
remove the Map entry after iterating ($skeletonList) by calling the Map's delete
with the stringified page key (String(page)) so the Map no longer retains the
empty reference; ensure you still guard with this.#$skeletons.has(String(page))
and perform delete after the forEach removal.

In `@src/components/main/MoreButton.ts`:
- Around line 1-8: Remove the dead commented-out component block for MoreButton:
delete the entire commented export/function block (the "// export const
MoreButton ..." through its closing "};") so the codebase no longer contains
unused commented code; if the component is intended to be kept, restore it as an
actual export function named MoreButton with its event listener instead of
leaving it commented.

In `@src/components/modal/SubmitRate.ts`:
- Around line 5-6: The private field names in SubmitRate.ts contain typos:
rename the class private properties #$submiteRateContainer ->
#$submitRateContainer and #$starContanier -> #$starContainer, and update every
reference to those symbols (constructor assignments, methods, querySelector
calls, event listeners, template/CSS references, and any type annotations) to
use the corrected identifiers so the class compiles and uses consistent names.

In `@src/main.ts`:
- Around line 11-33: PAGE_CACHE can grow unbounded because router() uses
fullpath (including query) as the cache key; limit growth by switching to a
bounded cache with eviction (e.g., an LRU strategy) and by normalizing keys for
pages that should be shared (e.g., use route.path for SearchPage instead of
fullpath) — implement a small LRUMap wrapper used by PAGE_CACHE and use it
inside router() when getting/setting. Also ensure pages provide a dispose()
method (add to HomePage/SearchPage classes) that removes any window event
listeners, and call page.dispose() when evicting entries from the cache (or
before replacing a cached entry) so listeners don’t accumulate.

In `@src/pages/HomePage.ts`:
- Around line 69-73: In `#appendMovies`(), renderSkeletons(this.#page) is called
before checking the page bounds which causes skeletons to flash when this.#page
> this.#totalPage; change the order so the page-range guard (if (this.#page >
this.#totalPage) return;) runs first and only call
this.#main.renderSkeletons(this.#page) after the guard passes (matching the
SearchPage behavior).
- Around line 11-44: HomePage and SearchPage duplicate pagination and
infinite-scroll logic (properties `#page`, `#totalPage`, `#isLoading`), the scroll
event handler (window.addEventListener(CUSTOM_EVENT.SCROOL_END,...)), common
handlers (`#onDetail`), and error/loading handling; extract these into a shared
abstraction (e.g., a PaginatedPage base class or a composition helper) that
declares and manages `#page`, `#totalPage`, `#isLoading`, methods like `#loadMore` and
`#initialFetch`, and the scroll subscription, then have HomePage and SearchPage
extend or compose that class and remove the duplicated implementations from
their constructors and methods so they reuse the shared handlers and state.

In `@src/pages/SearchPage.ts`:
- Around line 67-71: Move the page-range check before rendering skeletons in
`#appendMovies`: check if this.#page > this.#totalPage and return early, then call
this.#main.renderSkeletons(this.#page) only when the page is valid; update the
control flow in the async `#appendMovies` method so renderSkeletons is invoked
after the guard that uses this.#page and this.#totalPage.

In `@src/storage/LocalStorage.ts`:
- Around line 17-18: The exported variable localStorage shadows the browser
global window.localStorage; rename the instance to a descriptive identifier
(e.g., rateStorage or movieRatingStorage) where it’s created (new
LocalStorage()) and update the default export to use that new name, and then
update any import sites to the new name; ensure the class LocalStorage remains
unchanged and only the instance identifier and export are renamed to avoid the
global name collision.
- Around line 1-6: The private field `#myStorage` in class LocalStorage lacks a
TypeScript type annotation; update its declaration to include the appropriate
type (e.g., Storage) and keep the constructor assignment as is. Locate the class
LocalStorage and change the field declaration for `#myStorage` to explicitly type
it (for example, "#myStorage: Storage;") so the compiler and readers know it
holds window.localStorage. Ensure any usages of `#myStorage` remain compatible
with the chosen Storage type.

In `@src/utils/event.ts`:
- Around line 19-26: The current scrollEvent implementation behaves like
debounce (waits delay then fires) rather than a throttle; decide intended
behavior and update scrollEvent accordingly: if you want debounce, rename
scrollEvent or the throttle object to debounce and keep the current setTimeout
semantics; if you want a true throttle, change scrollEvent so it dispatches
CustomEvent(CUSTOM_EVENT.SCROOL_END) immediately when throttle.timer is null and
then sets throttle.timer = setTimeout(() => throttle.timer = null,
throttle.delay) to block further dispatches until delay elapses; reference the
scrollEvent function and the throttle object and ensure CUSTOM_EVENT.SCROOL_END
is still the event name you want.